<template>
  <div id="app">
    <div class="scrollPage">
      <div class="container">
        <app-header v-if="header_show"></app-header>
        <!-- <transition :name="transition"> -->
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
          </keep-alive>
        <!-- </transition> -->
        <!-- <transition :name="transition"> -->
          <router-view v-if="!$route.meta.keepAlive"></router-view>
        <!-- </transition> -->
        <app-footer v-if="footer_show"></app-footer>
      </div>
    </div>
  </div>
</template>

<script>
import Header from './components/Header'
import Footer from './components/Footer'
export default {
  data(){
    return {
      transition: 'slide-right',
      header_show:false,
      footer_show:false
    }
  },
  components: {
    'app-header':Header,
    'app-footer':Footer
  },
  computed: {},
  methods:{
  },
  watch:{
    $route(to, from) {
      // let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退
      // if (isBack) {
      //   this.transition = 'slide-left'
      // } else {
      //   this.transition = 'slide-right'
      // }
      // this.$router.isBack = false
      
      if(to.meta.header){
        this.header_show = true;
      }else{
        this.header_show = false;
      }
      if(to.meta.footer){
        this.footer_show = true;
      }else{
        this.footer_show = false;
      }
    }
  },
  mounted(){
    //添加顶部暂未解决IOS顶部不能点击问题。
    const u = navigator.userAgent
    const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
    if (isiOS) {
      window.history.pushState({}, 'title', '')//#
    }
  }
}
</script>
<style lang="scss">
@import './assets/css/common.scss';
@import './assets/css/style.css';
// @import "./assets/css/font/iconfont.css";
// @import "./assets/css/font/mystyleicon.css";
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.scrollPage{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.container{
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.main-box {
  width: 100%;
  overflow: hidden;
  flex: 1;
  -webkit-overflow-scrolling:touch
}
.max-width{
  max-width: 47.1875rem !important;
  margin: 0 auto;
}
.divscroll{
  overflow-x:hidden;
  overflow-y:auto;
}
.details-model {
  margin: .625rem 0 0;
  background: #fff;
  overflow: hidden;
  &.radius {
    border-radius: 1rem 1rem 0 0;
  }
}
.header-block{
  &:before{
    display: block;
    content: '';
    height: 46px;
  }
}
.bottom-block{
  &:after{
    display: block;
    content: '';
    height: 60px;
  }
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all .3s;
  position: absolute;
  width:100%;
  left:0;
}
.slide-right-enter {
  transform: translateX(-100%);
}
.slide-right-leave-active {
  transform: translateX(100%);
}
.slide-left-enter {
  transform: translateX(100%);
}
.slide-left-leave-active {
  transform: translateX(-100%);
}
</style>
